<template>
  <view class="container">
    <!-- 微信小程序广告组件 -->
    <ad-custom v-if="isWechat" :unit-id="adUnitId" :ad-intervals="30"></ad-custom>
    <!-- H5 或其他平台的占位符/默认广告图 -->
    <view v-else class="ad-banner-placeholder">
      <text class="ad-text">广告位 (非微信环境)</text>
    </view>

    <!-- 分类列表 -->
    <view class="category-list">
      <view class="category-item" v-for="(item, index) in categories" :key="item.id" @click="navigateToCategory(item.id)">
        <!-- 使用后端返回的图标URL -->
        <image class="category-icon" :src="item.icon" mode="aspectFit"></image>
        <text class="category-title">{{ item.title }}</text>
      </view>
    </view>

    <!-- 底部标签栏 -->
    <uni-tabbar :current="currentTab" :tabs="tabBarItems" @change="handleChangeTab"></uni-tabbar>
  </view>
</template>

<script>
import { getCategoryList } from '@/api/category.js'; // 导入API函数

export default {
  data() {
    return {
      isWechat: false,
      adUnitId: 'YOUR_AD_UNIT_ID_HERE', // 替换为你的实际广告单元ID
      currentTab: 1, // 假设分类页在tabBar中是第二个
      categories: [], // 初始化为空数组
      tabBarItems: [
        { pagePath: '/pages/home/home', text: '首页' },
        { pagePath: '/pages/category/category', text: '分类' },
        { pagePath: '/pages/card/card', text: '卡密激活' },
        { pagePath: '/pages/profile/profile', text: '我的' }
      ]
    };
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.isWechat = true;
    // #endif
    // 页面加载时获取分类数据
    this.loadCategories();
  },
  methods: {
    async loadCategories() {
       try {
         const res = await getCategoryList();
         if (res.code === 200) { // 假设成功状态码为 200
           this.categories = res.data;
         } else {
           uni.showToast({
             title: '分类数据加载失败',
             icon: 'none'
           });
         }
       } catch (error) {
         console.error('获取分类列表失败:', error);
         uni.showToast({
           title: '请求异常',
           icon: 'none'
         });
       }
    },
    navigateToCategory(id) {
      console.log('跳转到分类:', id);
	  uni.navigateTo({
	    url: `/pages/AllResources/AllResources?categoryId=${id}`
	  })
      // 实际项目中可以使用 uni.navigateTo 跳转到具体分类页面
      // uni.navigateTo({
      //   url: `/pages/project/list?categoryId=${category.id}&categoryName=${encodeURIComponent(category.title)}`
      // });
    },
    handleChangeTab(e) {
      this.currentTab = e.index;
      // 可以在这里根据索引跳转到不同的页面
      // const pages = ['/pages/home/home', '/pages/category/category', '/pages/card/card', '/pages/profile/profile'];
      // if (e.index >= 0 && e.index < pages.length) {
      //   uni.switchTab({ url: pages[e.index] });
      // }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  box-sizing: border-box;
}

.ad-banner-placeholder {
  width: 100%;
  height: 200rpx;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  border: 1px dashed #ccc;
}

.ad-text {
  color: #999;
  font-size: 28rpx;
}

.category-list {
  /* 移除 flex-wrap 和 justify-content */
}

.category-item {
  /* width: 48%; 修改为 100% */
  width: 100%;
  background-color: #ffffff;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx; /* 可以调整 item 之间的间距 */
  display: flex;
  flex-direction: row; /* 改为横向排列 */
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.category-item:active {
  transform: scale(0.98);
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx; /* 调整图标和文字的间距 */
  flex-shrink: 0; /* 防止图标在空间不足时被压缩 */
}

.category-title {
  font-size: 28rpx;
  color: #333;
  flex: 1; /* 让文字占据剩余空间 */
}
</style>



